<template>
  <div class="main">
    <div class="header-card">
      <div class="uc-header">
        <div class="back" @click="$router.back()">
          <img src="@/assets/img/3.png" />
        </div>
        <div class="popup-">{{ $t("UserCenter") }}</div>
      </div>
      <div class="userinfo">
        <div class="ui-l">
          <div class="at">
            <span class="at-icon" v-if="avatar"
              ><img :src="avatar" alt="" />
            </span>
            <span
              class="at-icon"
              v-else
              :style="{ background: `#${background}` }"
              >{{ mobileOrEmail?.[0] }}</span
            >
          </div>
          <div class="username">HI, {{ account_name }}</div>
        </div>
        <!-- <div class="ui-r" @click="$router.push('/authentication')">
          <div class="ui-r-bl1">
            <img src="@/assets/img/ucenter-info-t2.png" />
          </div>
          <div class="ui-r-bl2">Authentication</div>
        </div> -->
      </div>
      <!-- <div class="agen" v-if="is_agent === 1" @click="handleAgen">
        <div class="agen-button">Agen</div>
      </div> -->
      <!-- <div class="agen" @click="handleAgen" v-if="is_agent === '1'">
        <div class="agen-button">{{ $t("Agent") }}</div>
      </div> -->
      <!-- <div class="nbcc" @click="$router.push('/invitation')">
        <div class="nbcc-l">
          <div class="nbcc-l-p1">Invitation</div>
          <div class="nbcc-l-p2">Inviting friends will be rewarded</div>
        </div>
        <div class="nbcc-r">Invitation</div> 
      </div> -->
    </div>
    <div class="list">
      <!-- <div class="list-item" @click="$router.push('/invitation')">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          Invitation
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div> -->
      <!-- <div class="list-item" @click="$router.push('/verification')">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          {{ $t("IdentityVerification") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div> -->
      <div class="list-item" @click="$router.push('/setPassword')">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          {{ $t("ChangePassword") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div>
      <!-- <div class="list-item" @click="$router.push('/transforPassword')">
        <div class="li-l">
          <img src="@/assets/img/uc-li2.png" />
          Set Transaction Password
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div> -->
      <!-- <div class="list-item" @click="$router.push('/resetPassword')">
        <div class="li-l">
          <img src="@/assets/img/uc-li2.png" />
          Reset Password
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div> -->
      <div class="list-item" @click="$router.push('/assetCente')">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          {{ $t("Asset") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div>
      <!-- <div class="list-item" @click="$router.push('/message')">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          {{ $t("Message") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div>
      <div class="list-item" @click="feedBackFlag = true">
        <div class="li-l">
          <img src="@/assets/img/uc-li1.png" />
          {{ $t("Feedback") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div>
      <div class="list-item" @click="$router.push('/helpCenter')">
        <div class="li-l">
          <img src="@/assets/img/uc-li3.png" />
          {{ $t("HelpCenter") }}
        </div>
        <div class="li-r"><img src="@/assets/img/12.png" /></div>
      </div> -->
    </div>
    <div class="sign-out" @click="signOut">{{ $t("LogOut") }}</div>

    <van-popup v-model="feedBackFlag" round>
      <div class="popbox">
        <div class="popup-title">{{ $t("Feedback") }}</div>
        <div class="tbc">
          <van-field
            v-model="feedBackMsg"
            rows="10"
            autosize
            type="textarea"
            :placeholder="$t('FeedbackPlaceholder')"
          />
        </div>
        <div class="querybtn" @click="submitFeedBack">{{ $t("Send") }}</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { httpInfo, httpFeedBackAdd } from "@/http/api";
export default {
  name: "ucenter",
  data() {
    return {
      feedBackMsg: "",
      feedBackFlag: false,
      account_name: localStorage.getItem("account_name") || "", //账户名
      mobileOrEmail: localStorage.getItem("mobile")
        ? localStorage.getItem("mobile")
        : localStorage.getItem("email"),
      background: localStorage.getItem("bgck"),
      avatar: localStorage.getItem("avatar"),
      is_agent: localStorage.getItem("is_agent"),
      // is_agent:'',
    };
  },
  created() {
    if (!this.account_name) this.getUserInfo();
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      let res = await httpInfo();
      if (res.code == 0) {
        this.account_name = res.data.account_name;

        // this.is_agent = res.data.is_agent
        localStorage.setItem("account_name", res.data.account_name);
      }
    },
    // 退出
    signOut() {
      localStorage.clear();
      this.$router.replace("/login");
    },
    async submitFeedBack() {
      const params = {
        title: "feedback",
        description: this.feedBackMsg,
      };
      const res = await httpFeedBackAdd(params);

      if (res.code == 0) {
        this.$Toast.success(this.$t("Success"));
      } else {
        this.$Toast.fail(res.message);
      }

      this.feedBackMsg = "";
      this.feedBackFlag = false;
    },
    handleAgen() {
      this.$router.push("/agen");
    },
  },
};
</script>
<style lang="less" scoped>
@import url("./ucenter-common.less");

* {
  font-weight: 400;
  // columns: ;
  color: white;
}

.main {
  width: 100vw;
  min-height: 100vh;
  // background: rgba(246, 247, 252, 1);
  background: #000000;

  .header-card {
    width: 750px;
    // height: 288px;
    // background: url("~@/assets/img/ucenterheader.png") center/750px 438px;

    .userinfo {
      padding: 56px 35px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .ui-l {
        display: flex;
        align-items: center;
        justify-content: center;

        .at {
          width: 88px;
          height: 88px;
          overflow: hidden;
          border-radius: 50%;
          margin-right: 40px;
          flex-shrink: 0;

          .at-icon {
            width: 88px;
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 50px;

            // font-weight: 800;
            // color: #fff;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }

        .username {
          font-size: 28px;
          // font-weight: 700;
          // color: rgba(112, 126, 162, 1);
          // color:white;
          // max-width: 300px;
          line-height: 1.3;
          word-break: break-all;
        }
      }

      .ui-r {
        display: flex;
        align-items: center;

        .ui-r-bl1 {
          width: 69px;
          height: 58px;
          background: url("~@/assets/img/ucenter-info-t1.png") center/69px 58px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          top: -2px;
          left: 16px;

          img {
            width: 40px;
            height: 40px;
            position: relative;
            left: -2px;
          }
        }

        .ui-r-bl2 {
          width: 261px;
          height: 71px;
          background: url("~@/assets/img/ucenter-info-t3.png") center/261px 71px;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          // font-weight: 400;
          letter-spacing: 2.24px;
          // color: rgba(255, 255, 255, 1);
          padding-bottom: 8px;
        }
      }
    }

    .agen {
      margin: 0 35px 20px;

      &-button {
        color: #985f5f;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 20px;
        background: rgb(252, 237, 215);
        text-align: center;
        border-radius: 10px;
        height: 80px;
      }
    }

    .nbcc {
      width: 735px;
      height: 195px;
      background: url("~@/assets/img/ucenter-nbcc.png") center/735px 195px;
      margin: auto;
      margin-top: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 80px;
      z-index: 2;
      position: relative;

      .nbcc-l {
        .nbcc-l-p1 {
          text-shadow: 0px 3px 1px rgba(184, 150, 118, 1);
          font-size: 36px;
          // font-weight: 600;
          letter-spacing: 2.88px;
          // color: rgba(255, 255, 255, 1);
          margin-bottom: 20px;
        }

        .nbcc-l-p2 {
          font-size: 24px;
          // font-weight: 400;
          letter-spacing: 2.88px;
          // color: rgba(254, 241, 228, 1);
        }
      }

      .nbcc-r {
        width: 165px;
        height: 65px;
        background: rgba(253, 242, 228, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        // font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(132, 144, 177, 1);
        border-radius: 32.5px;
      }
    }
  }

  .list {
    // background: #fff;
    background: #000000;
    padding: 0px 34px 0;
    position: relative;
    // top: -60px;
    margin-bottom: 200px;
    margin-top: 40px;

    .list-item {
      height: 122px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(213, 213, 213, 0.56);
      // box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);
      user-select: none;

      &:last-of-type {
        border-bottom: none;
      }

      .li-l {
        font-size: 28px;
        // font-weight: 400;
        letter-spacing: 0px;
        // color: rgba(132, 144, 177, 1);
        display: flex;
        align-items: center;

        img {
          width: 58px;
          height: 58px;
          margin-right: 36px;
        }
      }

      .li-r {
        img {
          width: 25px;
          height: 35px;
          transform: rotate(0deg);
        }
      }
    }
  }

  .sign-out {
    width: 682px;
    height: 93px;
    opacity: 1;
    // background: rgba(223, 230, 252, 1);
    /**background-color: #e2da9e;
    border: 1px solid rgba(0, 0, 0, 1);**/
    background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
    display: flex;
    user-select: none;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    // font-weight: 400;
    // color: rgba(171, 182, 212, 1);
    margin: auto;
    border-radius: 16px;
  }
}

.popbox {
  width: 90vw;
  overflow: hidden;
  padding: 50px 30px 40px;

  .popup-title {
    width: 100%;
    text-align: center;
    font-weight: 400;
    font-size: 42px;
  }

  .tbc {
    width: 100%;
    display: flex;
    align-items: center;

    /deep/ .van-cell {
      border: 1px solid rgba(171, 182, 212, 1);
      border-radius: 15px;
      margin-top: 30px;
    }

    input {
      // height: 400px;
      padding: 24px;
      border: 1px solid #ccc;
      flex: 1;
      outline: none;
      font-size: 28px;
      width: 350px;
      margin-right: 20px;
      font-weight: 500;
      color: rgba(132, 144, 177, 1);
      background: transparent;
      border-radius: 10px;

      &::-webkit-input-placeholder {
        color: rgba(171, 182, 212, 1);
        font-size: 24px;
        font-weight: 400;
      }
    }
  }

  .querybtn {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    /** background: linear-gradient(
      178.44deg,
      rgba(238, 220, 201, 1) 0%,
      rgba(220, 188, 155, 1) 100%
    );
    box-shadow: 1px 7px 8px 0px rgba(201, 173, 144, 0.51);**/
    background: url("~@/assets/img/19.png") center/100% 100% no-repeat;
    //border-radius: 40px;
    color: #fff;
    font-size: 40px;
    user-select: none;
  }
}
</style>
